<template>
  <div id="box">
    <div class="wrapper">
      <h1>主页</h1>
      <hr>
      <nav>
        <ul class="nav-list">
          <!-- 一级菜单 -->
          <li v-for="topMenu in topLevelMenus" :key="topMenu.path">
            <RouterLink :to="topMenu.path">{{ topMenu.title }}</RouterLink>
          </li>

          <!-- 二级菜单 -->
          <li v-for="(children, parentKey) in groupedMenus" :key="parentKey" class="nav-item">
            <div class="nav-title" @click="toggleSubmenu(parentKey)">
              {{ children[0].parentTitle }}
            </div>
            <ul class="submenu" :class="{ 'active': openMenus[parentKey] }">
              <li v-for="child in children" :key="child.path">
                <RouterLink :to="child.path">{{ child.title }}</RouterLink>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
    <div class="main">
      <header>header
        {{ adminname }}
        <RouterLink to="/login">退出</RouterLink>
      </header>
      <main>
        <router-view></router-view>
      </main>
    </div>
  </div>

</template>
<script setup lang="ts">
import { reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useCounterStore } from "@/stores/counter";

const adminname = useCounterStore().adminname;
const router = useRouter();

// 定义菜单项接口
interface MenuItem {
  path: string;
  title: string;
  parentMenu?: string;
  parentTitle?: string;
  isTopLevel?: boolean;
}

// 从路由配置中获取菜单数据
const getMenusFromRoutes = () => {
  const layoutRoute = router.getRoutes().find(route => route.name === 'layout');
  if (!layoutRoute || !layoutRoute.children) return [];

  return layoutRoute.children
    .filter(route => route.meta?.showInMenu)
    .map(route => ({
      path: route.path,
      title: route.meta?.title as string,
      parentMenu: route.meta?.parentMenu as string,
      parentTitle: route.meta?.parentTitle as string,
      isTopLevel: route.meta?.isTopLevel as boolean
    })); 
};

// 获取所有菜单项
const allMenus = getMenusFromRoutes();

// 一级菜单（顶级菜单）
const topLevelMenus = computed(() => {
  return allMenus.filter(menu => menu.isTopLevel);
});

// 二级菜单（按父菜单分组）
const groupedMenus = computed(() => {
  const grouped: Record<string, MenuItem[]> = {};

  allMenus
    .filter(menu => !menu.isTopLevel && menu.parentMenu)
    .forEach(menu => {
      if (!grouped[menu.parentMenu!]) {
        grouped[menu.parentMenu!] = [];
      }
      grouped[menu.parentMenu!].push(menu);
    });

  return grouped;
});

// 动态创建菜单状态
const createMenuState = () => {
  const state: Record<string, boolean> = {};
  Object.keys(groupedMenus.value).forEach(key => {
    state[key] = false;
  });
  return state;
};

// 控制子菜单的展开状态
const openMenus = reactive(createMenuState());

// 切换子菜单的展开/收起状态
const toggleSubmenu = (menu: string) => {
  openMenus[menu] = !openMenus[menu];
};
</script>
<style scoped>
#box {
  display: flex;
  height: 100%;
}

.wrapper {
  height: 100%;
  width: 200px;
  background-color: #001529;
  color: white;
  padding: 10px;
  box-sizing: border-box;
}

.main {
  height: 100%;
  /* width: 100%; */
  flex: 1;
  overflow: hidden;
}

header {
  height: 60px;
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  margin: 10px 0;
}

.nav-title {
  cursor: pointer;
  padding: 10px;
  font-weight: bold;
  color: #f0f0f0;
  background-color: #002140;
  border-radius: 4px;
  transition: all 0.3s;
}

.nav-title:hover {
  background-color: #1890ff;
}

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding-left: 20px;
  list-style: none;
}

.submenu.active {
  max-height: 200px;
  transition: max-height 0.3s ease-in;
}

.submenu li {
  padding: 8px 0;
}

a {
  color: #a6adb4;
  text-decoration: none;
  display: block;
  padding: 8px;
  transition: color 0.3s;
}

a:hover {
  color: #1890ff;
}

h1 {
  color: white;
  text-align: center;
  margin-bottom: 20px;
}

hr {
  border-color: #333;
  margin: 15px 0;
}
</style>
